<template>
  <div class="headPortrait">
    <x-dialog v-model="isShowHeadPortrait" class="headPortrait-dialog">
      <div class="img-box">
        <input class="headPortrait__dialog--fileupload" v-show="!isShowClipArea" v-on:change="seleFile" type="file" id="file_reader" accept="image/*">
        <img v-show="!isShowClipArea&&!isShowView" src="~assets/x3/ico/shop-header.png" id="myHeadImgBig">
        <div v-show="isShowClipArea" id="clipArea"></div>
        <div v-show="isShowView" id="view"></div>
      </div>
      <div class="headPortrait__dialog_footer">
        <div class="headPortrait__dialog--close" @click="closeDialog">
          <span v-if="!isShowClipArea&&!isShowView"></span>
        </div>
        <x-button @click.native='closeDialogBtn' class="headPortrait__dialog--btn" v-show="isShowClipArea" mini>取消</x-button>
        <x-button @click.native='isShowView=true;isShowClipArea=false;' type="primary" class="headPortrait__dialog--btn acount__dialog--clipBtn" v-show="isShowClipArea" mini>截取</x-button>
        <x-button @click.native='closeDialogBtn' class="headPortrait__dialog--btn" v-show="isShowView" mini>取消</x-button>
        <x-button @click.native='closeDialog' type="primary" class="headPortrait__dialog--btn" v-show="isShowView" mini>保存</x-button>
      </div>
    </x-dialog>
  </div>
</template>
<script>
// import PhotoClip from "photoclip";      // "photoclip": "^3.3.3",
import { XDialog, XButton } from "vux";
import { Mutations } from "src/common/const";
import { RequestUrl } from "src/common/url";
import { mapState } from "vuex";
export default {
  components: {
    XDialog,
    XButton
  },
  props: ["isShowHeadPortrait"],
  computed: mapState(["user"]),
  data() {
    return {
      isShowClipArea: false,
      isShowView: false,
      showHideOnBlur: false,
      headFile: null,
      headImgTag: null,
      headImgSrcData: null
    };
  },
  methods: {
    closeDialogBtn() {
      this.$emit("closeDialog", false);
      return;
    },
    closeDialog() {
      let _this = this;
      let formData = new FormData();
      //判断用户是否有效
      if (!_this.user.isLogin) {
        return;
      }
      let userDto = _this.user.userDto;
      formData.append("userCode", userDto.userCode);

      //formData.append("localUrl", "upload/uploadHeadImg/");

      //文件流上传
      // if (_this.headFile == null) {
      //     _this.$emit("closeDialog", false); return;
      // }
      // formData.append('imgFile', _this.headFile);
      if (_this.headImgSrcData == null) {
        _this.$emit("closeDialog", false);
        return;
      }
      //把头部的data:image/png;base64,（注意有逗号）去掉
      let str = _this.headImgSrcData;
      str = str.split(",")[1]; //str = str.substring(22);
      //原来的字符流大小，单位为字节
      let strLength = str.length;
      //找到等号，把等号也去掉
      let equalIndex = str.indexOf("=");
      if (str.indexOf("=") > 0) {
        str = str.substring(0, equalIndex);
        //计算后得到的文件流大小，单位为字节
        let fileLength = parseInt(strLength - strLength / 8 * 2);
        if (fileLength >= 1048576) {
          //1MB
          //alert("文件大小不能超过1MB");
          return;
        }
      }
      formData.append("imgFileCode", _this.headImgSrcData); //文件编码上传
      // _this.$http.post(RequestUrl.UPLOAD_HEAD_IMG, formData, {
      _this.$http.post(RequestUrl.UPLOAD_HEAD_IMG_BY_CODE, formData, {
        headers: {
          "Content-Type": "multipart/form-data" //零时修改上传类型
        }
      })
        .then(function (res) {
          //默认名称路径
          let imgSrc = RequestUrl.HEAD_IMG_DEFAULT;
          if (res.state == 0) {
            //上传成功
            imgSrc = res.result.path;
            //保存USER_INFO信息
            _this.$common.storeCommit(_this, Mutations.SAVE_USER_INFO, res.result.user);
          }
          //更换新的图片路径
          document.getElementById("myHeadImg").setAttribute("src", imgSrc);
        });
      _this.$emit("closeDialog", false);
    },
    // 检查是否为图像文件
    isHave(files) {
      if (!/image\/\w+/.test(files.type)) {
        file_reader_result.innerHTML = "请选择图片文件！";
        return false;
      } else {
        return true;
      }
    },
    seleFile() {
      this.isShowClipArea = true;
    },
    initPage(_this) {
      let headImgUrl = document.getElementById("myHeadImg").getAttribute("src");
      document.getElementById("myHeadImgBig").setAttribute("src", headImgUrl);
      // let pc = new PhotoClip("#clipArea", {
      //   size: 260,
      //   outputSize: 200, //图片长宽最大像素
      //   //adaptive: ['60%', '80%'],
      //   file: "#file_reader",
      //   view: "#view",
      //   ok: ".acount__dialog--clipBtn",
      //   loadStart: function(fileImg) {
      //     _this.headFile = fileImg; //开始读取文件,fileImg=file_reader文件流
      //   },
      //   loadComplete: function(imgTag) {
      //     _this.headImgTag = imgTag; //文件读取完成,imgTag=htmldom
      //   },
      //   done: function(imgSrcData) {
      //     _this.headImgSrcData = imgSrcData; //imgSrcData=文件编码
      //   },
      //   fail: function(msg) { }
      // });
    }
  },
  mounted() {
    this.initPage(this);

    // 加载的图片必须要与本程序同源，否则无法截图
    // pc.load('./vux_logo.jpg');
  }
};
</script>

<style lang="less" scoped>
.headPortrait__dialog--fileupload {
  opacity: 0;
  position: absolute;
  z-index: 10;
  height: 300px;
  width: 100%;
}

#clipArea {
  position: unset !important;
  overflow: initial !important;
}

.headPortrait-dialog {
  .weui-dialog {
    border-radius: 8px;
    padding-bottom: 8px;
  }
  .dialog-title {
    line-height: 30px;
    color: #666;
  }
  .img-box {
    height: 300px;
    overflow: hidden;
  }
}

.headPortrait__dialog--btn {
  margin-top: 8px !important;
  margin-bottom: 8px !important;
}

#view {
  width: 300px;
  height: 300px;
}

.headPortrait__dialog_footer {
  height: 50px;
  line-height: 50px;
  background-color: #efefef;
}

.headPortrait__dialog--close {
  background-color: #efefef;
  span {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    color: #999;
    width: 30px;
    height: 30px;
    &:before,
    &:after {
      content: "";
      position: absolute;
      left: 0;
      top: 11px;
      width: 30px;
      height: 1px;
      background-color: currentColor;
      transform: rotate(-45deg);
    }
    &:after {
      transform: rotate(45deg);
    }
  }
}

#myHeadImgBig {
  width: 300px;
  max-width: 100%;
  min-width: 50%;
}
</style>


